<template>
	<navigatorComp title="我举行的" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<mescroll-uni :height="height + 'px'" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback"
		@up="upCallback">
		<view class="meeting_list">
			<view class="meeting_item" v-for="(item, index) in list" @click="goDetail(item)">
				<image class="printImg" src="http://112.124.50.179:8888/imgs/home/meeting_noStart.png" mode="" v-if="item.state==0">
				</image>
				<image class="printImg" src="http://112.124.50.179:8888/imgs/home/meeting_on.png" mode="" v-if="item.state==1"></image>
				<image class="printImg" src="http://112.124.50.179:8888/imgs/home/meeting_end.png" mode="" v-if="item.state==2"></image>
				<view class="meeting_item_top">
					<text>{{item.names?item.names.join(','):item.names}}纪念馆</text>
					<image src="http://112.124.50.179:8888/imgs/home/white_more.png" @click.stop="showMore(item)"></image>
				</view>
				<view class="meeting_item_time">
					<view style="font-size: 28rpx; line-height: 33rpx; margin-bottom: 12rpx">
						追思会举行时间:
					</view>
					<view>{{timeFormatFunc(item.startTime)}} - {{timeFormatFunc(item.endTime)}}</view>
				</view>
			</view>
		</view>
	</mescroll-uni>

	<!-- 按钮弹框 -->
	<u-popup :show="showMoreFunc" bgColor="rgba(0,0,0,0)" @close="closeMore" custom-style="padding:0 16rpx 0;">
		<view class="button_list">
			<u-button shape="circle" :custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: 0}"
				@click="editMeeting">
				编辑
			</u-button>
			<u-button shape="circle" :custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: 0 }"
				@click="delMeeting">
				删除
			</u-button>
		</view>

		<u-button shape="circle" :custom-style="{ ...moreBtnStyle, fontWeight: 700 }" @click="closeMore">
			取消
		</u-button>
	</u-popup>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		timeFormat
	} from '@/node_modules/uview-plus';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import navigatorComp from '/components/navigator/index.vue';
	import HomeApi from '@/API/home/index.js';
	const homeApi = new HomeApi();

	const {
		mescrollInit,
		getMescroll
	} = useMescroll(); // 调用mescroll的hook
	//翻页信息
	const downOption = ref({
		auto: false
	});
	const upOption = ref({
		auto: false,
	});
	const lastId = ref(0); //最后一个元素的id
	const height = ref(0);

	const list = ref([]); //追思会列表

	// 更多按钮
	const showMoreFunc = ref(false);
	const currentMeeting = ref({});
	const moreBtnStyle = {
		height: '120rpx',
		borderRadius: '26rpx 26rpx 26rpx 26rpx',
		backgroundColor: '#fff',
		fontWeight: '400',
		fontSize: '40rpx',
		color: '#007AFF',
		marginBottom: '16rpx'
	};

	onLoad(() => {
		// #ifdef MP-WEIXIN
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight;
		// #endif

		// #ifdef APP || H5
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight -
			uni.upx2px(88);
		// #endif
	});

	onShow(() => {
		setTimeout(() => {
			lastId.value = 0;
			getMescroll().resetUpScroll();
		}, 1)
	});
	const downCallback = (mescroll) => {
		lastId.value = 0
		getMescroll().resetUpScroll()
	}
	/**
	 * 上拉加载
	 */
	const upCallback = (mescroll) => {
		homeApi.getMemorialServiceListApi({
				latestId: lastId.value
			})
			.then((res) => {
				const curPageData = res.data.memorialServiceList || []; // 当前页数据
				if (lastId.value == 0) list.value = []; //如果是第一页需手动制空列表
				list.value = list.value.concat(curPageData); //追加新数据\
				if (curPageData.length > 0) {
					lastId.value = curPageData[curPageData.length - 1].memorialServiceId;
				}
				mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			})
			.catch(() => {
				mescroll.endErr(); // 请求失败, 结束加载
			});
	};

	/**
	 * 点击更多
	 */
	const showMore = (item) => {
		showMoreFunc.value = true;
		currentMeeting.value = item;
	};
	/**
	 * 时间格式化
	 */
	const timeFormatFunc = (date) => {
		return timeFormat(date, 'yyyy年mm月dd日 hh:MM');
	};
	const closeMore = () => {
		showMoreFunc.value = false;
	};

	/**
	 * 编辑纪念馆
	 */
	const editMeeting = () => {
		goUrl(`/subPages/home/memorial_meeting/index?item=+${JSON.stringify(currentMeeting.value)}&&isEdit=` + JSON
			.stringify(true))
		closeMore()
	}

	/**
	 * 删除追思会
	 */
	const delMeeting = () => {
		homeApi.deleteMemorialServiceApi({
				memorialId: currentMeeting.value.memorialId,
				memorialServiceId: currentMeeting.value.memorialServiceId
			})
			.then((res) => {
				uni.showToast({
					title: '删除成功'
				})
				closeMore()
				lastId.value = 0;
				getMescroll().resetUpScroll();
			})
			.catch(() => {});


	}
	const goDetail = (item) => {
		uni.setStorageSync('memorialId', item.memorialId)
		goUrl('/subPages/home/memorial_meeting/detail')
	}
	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
		box-sizing: border-box;
	}

	.content {
		padding: 0;
	}

	.meeting_list {
		padding: 24rpx 32rpx;

		.meeting_item {
			width: 100%;
			height: 220rpx;
			background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 34rpx 24rpx 32rpx 32rpx;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 24rpx;

			.printImg {
				position: absolute;
				right: 96rpx;
				top: 0;
				width: 156rpx;
				height: 156rpx;
			}

			.meeting_item_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 38rpx;
				margin-bottom: 24rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.meeting_item_time {
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 28rpx;
			}
		}
	}

	.button_list {
		width: 100%;
		border-radius: 26rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
		opacity: .8;
	}
</style>